<template>
	<view class="bill-page-container">
		<uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入单据编号" clearButton="auto" cancelButton="none"
			@confirm="search" @clear="handleClear" />
		<view class="content">
			<view class="list">
				<view v-for="(item, index) in list" :key="index" class="item" @click="handleDetail(item, index)">
					<view class="title">{{ item.billNo }}</view>
					<view class="context">
						<text class="text">交易对象：{{ formatBlank(item.transObjName) }}</text>
						<text class="text">财务人员：{{ formatBlank(item.financeUserId) }}</text>
						<text class="text">操作员：</text>
						<text class="text">结算账号：{{ item.accountName }}</text>
						<text class="text">单据类别：{{ typeConfig[item.type] }}</text>
						<text class="text">收支项目：{{ formatBlank(item.inOutItemName) }}</text>
						<text class="text w-full">单据日期：{{ formatDate(item.billTime) }}</text>
						<text class="text w-full">备注：{{ formatBlank(item.remark) }}</text>
					</view>
					<view class="total">
						<!-- 支出 -->
						{{ typeConfig[item.type] }}：{{ item.changeAmount }}
					</view>
				</view>
			</view>
			<view v-if="!list.length" class="no-data">没有更多数据</view>
		</view>
		<view class="btn-add" @click="handleDetail">
			<uni-icons type="plusempty" size="30"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {
		getFinanceInOut
	} from "@/api/work/finance-in-out"
	import { formatDate } from '@/uni_modules/uni-dateformat/components/uni-dateformat/date-format.js';
	
	export default {
		data() {
			return {
				list: [],
				typeConfig: {
					in: "收入",
					out: "支出",
				},
				billNo: "",
			}
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取数据
			getData() {
				let data = {
					billNo: this.billNo
				}
				getFinanceInOut(data).then((res) => {
					this.list = res && res.data && res.data.list ? res.data.list : [];
				})
			},
			// 详情
			handleDetail(item, index) {
				let url = '/pages/work/bill/detail';
				if(item.id)url += '?id=' + item.id;
				this.$tab.navigateTo(url);
			},
			formatDate(time) {
				if(!time)return "";
				return formatDate(time, "yyyy-MM-dd");
			},
			formatBlank(str) {
				return str?str:"";
			},
			search(val) {
				this.billNo = val.value;
				this.getData();
			},
			handleClear() {
				this.search({
					value: ""
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	.bill-page-container {
		padding-bottom: 60rpx;

		.content {
			.list {
				.item {
					padding: 16rpx 20rpx;
					background: #ffffff;

					&+.item {
						margin-top: 16rpx;
					}

					.title {
						font-size: 32rpx;
						color: blue;
					}

					.context {
						padding: 6rpx 0;

						.text {
							min-width: 50%;
							color: #666666;
							padding: 4rpx 0;
							display: inline-block;

							&.w-full {
								widows: 100%;
							}
						}
					}

					.total {}
				}
			}

			.no-data {
				font-size: 24rpx;
				text-align: center;
				color: #999999;
			}
		}

		.btn-add {
			position: fixed;
			right: 40rpx;
			bottom: 40rpx;
			width: 100rpx;
			height: 100rpx;
			text-align: center;
			padding: 18rpx;
			border: 1rpx solid #cccccc;
			border-radius: 50%;
			background: #ffffff;
			z-index: 100;
		}
	}
</style>
<style>
	.uni-searchbar /deep/.uni-searchbar__box {
		background: #ffffff!important;
	}
</style>